<template>
    <div class="operate-log">
        <div class="Ptitle">{{ titleFont }}</div>
        <!-- 查询客户基本信息 -->
        <account-info :trtdData="trtdData" :tableTitle="'查询客户基本信息'"></account-info>
        <!-- 查询客户基本信息完 -->
        <!-- 关联关系列表 -->
        <table class="mailTable" cellspacing="0" cellpadding="0" style="margin-top: 100px;">
            <tr>
                <td class="theadbody" colspan="4"> 关联关系列表</td>
            </tr>
        </table>
        <div class="mailTable">
            <vx-table :tableData="tableData" :isSelect="true" :columns="columns" @updatae="updatae"></vx-table>
        </div>
        <!-- 关联关系列表完 -->
        <div class="btnbody">
            <ui-button class="primary-btn" @click="searchList(true)">新增关系</ui-button>
            <ui-button class="default-btn" style="margin-left: 30px;" @click="reset">解除关系</ui-button>
        </div>
    </div>
</template>
    
<script>
import pagination from '@/common/mixin/pagination.js'; // 混入/分页
import vxTable from '@/components/vx-table';
import accountInfo from './components/accountInfo.vue'
export default {
    name: 'AccountRelation_info',
    mixins: [pagination],
    data() {
        return {
            queryForm: {
                operTime: [],
                types: '',
                searchName: ''
            }, // 查询表单
            operatorType: [], // 操作类型列表
            tableData: [{ updatedBy: 222 }], // 列表数据
            isLoading: false, // 查询列表loading
            layout: 'prev, pager, next, total',
            columns: [
                {
                    prop: 'updatedBy',
                    label: '客户号',
                },
                {
                    prop: 'userName',
                    label: '客户名称',
                },
                {
                    prop: 'userName',
                    label: '客户类型',
                }, {
                    prop: 'updatedBy',
                    label: '管户机构',
                },
                {
                    prop: 'updatedBy',
                    label: '金融资产',
                },
                {
                    prop: 'updatedBy',
                    label: '客户等级',
                },
                {
                    prop: 'updatedBy',
                    label: '关联关系',
                },
                // {
                //     prop: 'createdBy',
                //     label: '3',
                //     formatter: (row, column, cellValue, index) => {
                //         return wordcut(cellValue, 3, 4);
                //     }
                // }
            ], //表头
            trtdData: [
                {
                    label: '客户号',
                    labelData: '11111',
                    label2: '客户名称',
                    label2Data: '22222'
                },
                {
                    label: '客户类型',
                    labelData: '11111',
                    label2: '管户机构',
                    label2Data: '22222'
                },
                {
                    label: '金融资产',
                    labelData: '11111',
                    label2: '客户等级',
                    label2Data: '22222'
                },
            ],
            titleFont: '客户间关系详情'
        };
    },
    components: {
        vxTable,
        accountInfo
    },
    created() {

    },
    methods: {
        /**
         * 获取详情
         * @param {object} value 当前列表数据
         */
        subDetail(value) {
        },
        /**
         * 查询操作日志
         * @param {boolean} val 是否重置当前页签
         */
        searchList(val) {
            this.$router.push({
                path: '/AccountManager/AccountRelation_infoAdd',
            })
        },
        /**
         * 重置
         */
        reset() {
            this.queryForm = { operTime: [] };
            this.currentPage = 1;
            this.searchList();
        },
        // 维护跳转
        updatae(val) {
            console.log(val)
            // this.
        },
    },
};
</script>
    
<style lang="scss" scoped>
.operate-log {

    .ui-icon-plus,
    .ui-icon-search {
        color: #fff;
    }

    .vx-dialog.ui-dialog {
        width: 750px;
    }

    .success {
        color: $color-success;
    }

    .error {
        color: $color-danger;
    }

    .Ptitle {
        font-size: 20px;
        font-weight: bold;
        margin-bottom: 40px;
    }

    .theadbody {
        width: 100% !important;
        background-color: #BCBCBC;
        height: 35px;
        line-height: 35px;
    }

    .Ptitle2 {
        font-size: 20px;
        font-weight: bold;
        margin-bottom: 40px;
        margin-top: 40px;
    }

    .mailTable {
        width: 95%;
        margin: auto;
        border-top: 1px solid #E6EAEE;
        border-left: 1px solid #E6EAEE;
    }

    .mailTable tr td {
        // width: 100px;
        height: 45px;
        line-height: 45px;
        box-sizing: border-box;
        padding: 0 10px;
        border-bottom: 1px solid #E6EAEE;
        border-right: 1px solid #E6EAEE;
    }

    .mailTable tr td.column {
        background-color: #EFF3F6;
        color: #393C3E;
        width: 20%;
    }

    .btnbody {
        width: 20%;
        margin: 50px auto;
    }
}
</style>
    